<template>
    <!-- 每项订单信息 -->
    <div class="shops" @click="goStatus">
      <div class="time">
        <p>{{ or_information._add_time }}</p>
        <p>{{ or_information._status._title }}</p>
      </div>
      <div class="br"></div>
      <div
        class="shop"
        v-for="(d, index) in or_information.cartInfo"
        :key="index"
      >
        <img :src="d.productInfo.image" alt="" />
        <p class="store_name">{{ d.productInfo.store_name }}</p>
        <div class="money_num">
          <p>￥{{ d.productInfo.price }}</p>
          <div>×{{ d.cart_num }}</div>
        </div>
      </div>
      <div class="total_prices">
        总{{ or_information.cartInfo.length }}件商品，总金额
        <span>￥{{ or_information.pay_price }}</span>
      </div>
      <div class="br"></div>
      <div class="shop_btn">
        <van-button
          size="small"
          @click.stop="goStatus"
          color="rgb(233,51,35)"
          round
          type="info"
          >查看详情</van-button
        >
      </div>
    </div>
</template>
<script>
export default {
  props: {
    or_information: Object, //每项订单信息
  },
  methods: {
    // 点击 查看详情
    goStatus() {
      this.$router.push("/order/" + this.or_information.order_id);
    },
  },
};
</script>
<style lang="less" scoped>

.shops {
  .br {
    height: 1px;
    width: 100%;
    background-color: #eee;
    margin: 10px 0;
  }
  .time {
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 14px;
      &:last-child {
        color: tomato;
      }
    }
  }
  .shop {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 60px;
      height: 60px;
    }
    // 商品名称
    .store_name {
      font-size: 14px;
      width: 50%;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 40px;
      line-height: 20px;
      margin: 0 10px;
    }
    .money_num {
      position: absolute;
      right: 0;
      text-align: right;
      margin: 0;
      color: rgb(174, 174, 174);
      p {
        font-size: 14px;
      }
      div {
        font-size: 14px;
      }
    }
  }
  .total_prices {
    font-size: 14px;
    text-align: right;
    span {
      color: rgb(241, 85, 71);
      font-weight: 600;
    }
  }
  .shop_btn {
    text-align: right;
    .van-button--small {
      padding: 0 15px;
    }
    .cancel {
      color: rgb(161, 161, 161);
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(161, 161, 161);
      margin-right: 10px;
    }
  }
}
</style>